<template>
    <div class="tab-control">
        <div v-for="(item,index,) in titles" :key="index"
             class="tab-control-item" :class="{active : index === currentIndex}" @click="itemclick(index)">
            <span>{{item}}</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "TabControl",
        props: {
            titles: {
                type: Array,
                data() {
                    return [];
                }
            }
        },
        data(){
            return{
                //定义一个数据来记录当前的板块
                currentIndex :0
            }
        },
        methods:{
            itemclick(index){
                this.currentIndex = index
                //子传父 传递事件的点击
                this.$emit('tabclick',index )
            }
        }

    }
</script>

<style scoped>
    .tab-control {
        display: flex;
        text-align: center;
        font-size: 16px;
        height: 40px;
        line-height: 40px;
        background-color: #ffffff;
        z-index: 9;



    }

    .tab-control-item {
        flex: 1;
    }

    .tab-control-item span{
        padding-bottom: 5px;
    }
    .active{
        color: #CC3399;
    }
    .active span{
        border-bottom: 3px solid #CC3399;

    }
</style>